<template>
  <Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="200">
    <FormItem label="原密码" prop="oldPwd">
      <Input type="password" password v-model="formCustom.oldPwd" style="width: 300px"></Input>
    </FormItem>
    <FormItem label="新密码" prop="newPwd">
      <Input type="password" password v-model="formCustom.newPwd"></Input>
    </FormItem>
    <FormItem label="再次输入新密码" prop="newPwdCheck">
      <Input type="password" password v-model="formCustom.newPwdCheck"></Input>
    </FormItem>
    <FormItem>
      <Button type="primary" @click="handleSubmit()">提交</Button>
      <Button @click="handleReset()" style="margin-left: 15px">重置</Button>
    </FormItem>
  </Form>
</template>
<script>
import { getBasicInfo } from "../../utils/mixin";

export default {
  mixins: [getBasicInfo],
  data() {
    const validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入当前账户密码"));
      } else {
        if (this.formCustom.newPwd !== "") {
          this.$refs.formCustom.validateField("newPwd");
        }
        callback();
      }
    };
    const validateNewPass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入新密码"));
      } else {
        if(value === this.formCustom.oldPwd)
          callback(new Error('新密码与旧密码一致'));
        if (this.formCustom.newPwdCheck !== "") {
          // 对第二个密码框单独验证
          this.$refs.formCustom.validateField("newPwdCheck");
        }
        callback();
      }
    };
    const validateNewPassCheck = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入新密码"));
      } else if (value !== this.formCustom.newPwd) {
        callback(new Error("两次密码不一致！"));
      } else {
        callback();
      }
    };

    return {
      formCustom: {
        oldPwd: "",
        newPwd: "",
        newPwdCheck: ""
      },
      ruleCustom: {
        oldPwd: [{ validator: validatePass, required: true, trigger: "blur" }],
        newPwd: [
          { validator: validateNewPass, required: true, trigger: "blur" }
        ],
        newPwdCheck: [
          { validator: validateNewPassCheck, required: true, trigger: "change" }
        ]
      }
    };
  },
  methods: {
    handleSubmit() {
      this.$refs["formCustom"].validate(valid => {
        if (valid) {
          this.axios
            .post(`/api/password/${this.getUid}`, this.formCustom)
            .then(res => {
              if (res.data.status) {
                this.$Message.success(res.data.msg);
                this.handleReset();
              } else {
                this.$Message.error(res.data.msg);
                this.formCustom.oldPwd = "";
              }
            })
            .catch(err => this.$Message.error(err));
        } else {
          this.$Message.error("填写信息有误，请检查后重试");
        }
      });
    },
    handleReset() {
      this.$refs["formCustom"].resetFields();
    }
  }
};
</script>

<style lang="scss" scoped>
.ivu-form {
  padding: 30px;
}
</style>